<template>
  <!-- system_maintenance 系统维护 -->
  <div class="system_maintenance">
    <!-- Change 更新 -->
    <div class="Change">
      <div class="top">
        <div class="lvgang"></div>
        <span>系统维护</span>
      </div>
      <div class="part">
        <div>
          <span>升级方式</span>
          <a-space>
            <label for="check" class="m-check ui-margin"
              ><input type="radio" class="check" name="updata" id="check" />
              &nbsp; 自动升级 &nbsp;&nbsp;</label
            >
            <label class="m-check ui-margin" for="check"
              ><input
                id="check"
                type="radio"
                class="check"
                name="updata"
              />&nbsp;&nbsp; 不自动升级</label
            >
          </a-space>
        </div>
        <div>
          <span>手动升级</span><el-button type="primary">检查更新</el-button>
        </div>
        <div><span>当前版本</span> <span>V1.0.0</span></div>
      </div>
    </div>
    <a-divider />
    <!-- set_up 设置-->
    <div class="set_up">
      <div class="parts">
        <div>
          <p><span>恢复出厂设置:</span></p>
          <el-button type="primary">恢复出厂设置</el-button>
        </div>
        <div>
          <p><span>重启威胁感知系统:</span></p>
          <el-button type="primary">立即重启</el-button>
        </div>
        <div>
          <p><span>恢复用户配置:</span></p>
          <el-button type="primary">导入用户配置</el-button>
          <el-button type="primary">导出用户配置</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { ref } from "vue";
export default {
  data() {
    return {};
  },
  methods: {},
};
</script>
<style lang="less" scoped>
.system_maintenance {
  background-color: #fff;
  margin-top: 30px;
  width: 870px;
  float: right;
  padding-right: 25px;
  float: right;
  button {
    font-weight: bold;
    height: 44px;
    background-color: #33cabb;
    user-select: none;
    outline: 0;
    border: 0;
    border-radius: 4px;
    padding: 0 14px;
    margin-right: 20px;
  }
  .Change {
    padding-bottom: 60px;
    border: 1px solid #ccc;
    border-width: 0px 0px 1px;
    h1 {
      margin: 0 0 40px 0;
      padding-left: 16px;
      position: relative;
      line-height: 1;
      font-weight: normal;

      &::after {
        content: "";
        display: block;
        width: 8px;
        height: 28px;
        background-color: #15c87a;
        position: absolute;
        top: 4px;
        left: 0;
      }
    }
    .part {
      > div {
        margin-bottom: 34px;
        span:nth-child(1) {
          margin-right: 30px;
        }
      }
      input {
        outline-style: none;
        -webkit-appearance: none;
        border: none;
        appearance: none;
        // margin-left: 10px;
      }
      label input {
        vertical-align: text-bottom;
        width: 18px;
        height: 18px;
        border: 1px solid #dddddd;
        border-radius: 50%;
      }
      label input:checked {
        border: 6px solid #33cabb;
        background: #ffffff;
      }
    }
    .top {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      .lvgang {
        width: 8px;
        height: 28px;
        background-color: #15c77a;
        margin-right: 10px;
      }
      span {
        font-size: 24px;
      }
    }
  }
  .set_up {
    margin-top: 60px;
    .parts {
      div {
        margin-bottom: 34px;
        display: flex;
        align-items: center;
        p {
          width: 133px;
          display: flex;
          flex-direction: row-reverse;
          margin-right: 20px;
        }
      }
    }
    margin-bottom: 150px;
  }
}
</style>
